<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">发货通知详情页</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                 <el-col class="mr20 width100" v-if="noticeDetailData.status == 1 && noticeDetailData.storeOut == 0">
                    <el-button
                        class="btn-delete width100"
                        type="primary"
                        @click="cancelNotice()"
                    >撤销通知</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="noticeDetailData.status == 0 || noticeDetailData.status == 2">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="sendNotice()"
                    >发货</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : noticeDetailData.status == 0 }">未通知</span>
                        <span :class="{ 'active' : noticeDetailData.status == 1 }">已通知</span>
                        <span :class="{ 'active' : noticeDetailData.status == 2 }">已撤回</span>
                    </div>
                </el-col>
            </el-row>
            <template v-if="noticeDetailData.status == 0 || noticeDetailData.status == 2">
                <el-row class="detail-item">
                    <el-col :span="12" style="position:relative;">
                        <span>收货人：</span><el-input v-model="send.name" placeholder="请输入收货人" @input="filter" @clear="clear" clearable />
                        <ul class="options" v-if="isShow">
                            <div class="options-item" v-if="list.length > 0">
                                <li @click="check(item.name, item.address, item.telephone)" v-for="item in list" :key="item.id">
                                    {{ item.name + item.telephone + item.address}}
                                </li>
                            </div>
                        </ul>
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="12">
                        <span>联系方式：</span><el-input v-model="send.telephone" placeholder="请输入联系电话" clearable @input="onInput" />
                    </el-col>
                </el-row>
                <el-row class="detail-item mb80">
                    <el-col :span="12">
                        <span>收货地址：</span><el-input v-model="send.address" placeholder="请输入收货地址" clearable @input="onInputAddress" />
                    </el-col>
                </el-row>
            </template>
            <template v-if="noticeDetailData.status == 1">
                <el-row class="detail-item">
                    <el-col :span="12">
                        <span>收货人：</span>{{ noticeDetailData.name ? noticeDetailData.name : '暂无' }}
                    </el-col>
                </el-row>
                <el-row class="detail-item">
                    <el-col :span="12">
                        <span>联系电话：</span>{{ noticeDetailData.telephone ? noticeDetailData.telephone : '暂无' }}
                    </el-col>
                </el-row>
                <el-row class="detail-item mb80">
                    <el-col :span="24">
                        <span>收货地址：</span>{{ noticeDetailData.address ? noticeDetailData.address : '暂无' }}
                    </el-col>
                </el-row>
            </template>

            <el-row class="detail-item">
                <el-col :span="8">
                    <span>计划编码：</span>{{ noticeDetailData.planCode ? noticeDetailData.planCode : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>产品批号：</span>{{ noticeDetailData.batchNumber ? noticeDetailData.batchNumber : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>产品名称：</span>{{ noticeDetailData.productName ? noticeDetailData.productName : '暂无' }}
                </el-col>
                <el-col :span="8">
                    <span>产品规格：</span>{{ noticeDetailData.productSpace ? noticeDetailData.productSpace : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>入库数量：</span>{{ noticeDetailData.store }}
                </el-col>
                <el-col :span="8">
                    <span>库存数量：</span>{{ noticeDetailData.storeNum }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>可通知数量：</span>{{ noticeDetailData.allowCount == null ? 0 : noticeDetailData.allowCount }}
                </el-col>
                <template v-if="noticeDetailData.status == 1">
                    <el-col :span="8">
                        <span>通知数量：</span>{{ noticeDetailData.planStoreOut }}
                    </el-col>
                </template>
                <template v-else>
                    <el-col :span="8">
                        <span>通知数量：</span><el-input v-model="send.planStoreOut" placeholder="请输入通知数量" clearable />
                    </el-col>
                </template>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>实际数量：</span>{{ noticeDetailData.storeOut }}
                </el-col>
                <el-col :span="8">
                    <span>状态：</span>
                    <font v-if="noticeDetailData.status == 0" style="color:#13C2C2">未通知</font>
                    <font v-if="noticeDetailData.status == 1" style="color:#52C41A">已通知</font>
                    <font v-if="noticeDetailData.status == 2" style="color:#52C41A">已撤回</font>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>备注：</span>{{ noticeDetailData.remark ? noticeDetailData.remark : '暂无' }}
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { detailNotice, cancelNotice, listAddress, sendNotice, orderNotice } from "@/api/system/notice/notice"
export default {
    name: "noticeDetail",
    data() {
        return {
            id: '',
            noticeDetailData: '',
            addressData: '',
            send: {
                name: '',
                telephone: '',
                address: '',
                planStoreOut: ''
            },
            isShow: false,
            list: ''
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetailData()
        this.getAddressData()
    },
    methods: {
        // 获取详情信息
        getDetailData() {
            detailNotice(this.id).then(res => {
                this.noticeDetailData = res.data
                if(res.data.status == 0){
                    this.send.name = res.data.name
                    this.send.telephone = res.data.telephone
                    this.send.address = res.data.address
                    // this.send.planStoreOut = res.data.planStoreOut
                }
            })
        },
        // 获取收货人列表
        getAddressData(){
            listAddress().then(res => {
                this.addressData = res.rows
            })
        },
        // 根据name过滤搜索结果
        filter(val) {
            if (this.send.name) {
                this.isShow = true
            } else {
                this.isShow = false
                this.send.address = ''
                this.send.telephone = ''
            }
            this.list = this.addressData.filter((item) => {
                return item.name.includes(this.send.name)
            })
            if(this.send.name !== ''){
                //替换字符串中的所有特殊字符（包含空格）
                const pattern=/[`~!@#$^&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
                this.send.name = val.replace(pattern,"");
            }
        },
        // 选中
        check(name, address, telephone) {
            this.send.name = name
            this.send.address = address
            this.send.telephone = telephone.replace(/[^0-9]/ig, '')
            this.isShow = false
        },
        onInput(e){
            this.send.telephone = e.replace(/[^0-9]/ig, '')
        },
        // 替换字符串中的所有特殊字符（包含空格）
        onInputAddress(e){
            if(e !== ''){
                const pattern=/[`~!@#$^&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g;
                this.send.address = e.replace(pattern,"");
            }
        },
        // 清除
        clear(){
            this.send.name = ''
            this.send.address = ''
            this.send.telephone = ''
        },
        // 发货
        sendNotice(){
            const { name, address, telephone, planStoreOut } = this.send
            if(name == ''){
                this.$modal.msgError('收货人不能为空！')
            }else if(telephone == ''){
                this.$modal.msgError('联系方式不能为空！')
            }
            // else if(/^[1-9]\d*$|^0$/.test(telephone) == false){
            //     this.$modal.msgError('联系方式必须是数字！')
            //     return false
            // }
            else if(address == ''){
                this.$modal.msgError('收货地址不能为空！')
            }else if(planStoreOut == ''){
                this.$modal.msgError('通知数量不能为空！')
            }else{
                if(JSON.parse(planStoreOut) > 0){
                    if(JSON.parse(planStoreOut) == this.noticeDetailData.allowCount){
                        sendNotice(this.id, name, telephone, address, planStoreOut, this.noticeDetailData.allowCount).then((res) => {
                            this.getDetailData()
                            this.$modal.msgSuccess(res.msg)
                        })
                    }else{
                        if(JSON.parse(planStoreOut) > 0){
                            if(JSON.parse(planStoreOut) < this.noticeDetailData.allowCount){
                                orderNotice(this.id, name, telephone, address, planStoreOut, this.noticeDetailData.allowCount).then((res) => {
                                    this.getDetailData()
                                    this.$modal.msgSuccess(res.msg)
                                })
                            }else{
                                this.$modal.msgError('通知数量不能大于可通知数量!')
                            }
                        }else{
                            this.$modal.msgError('通知数量必须大于0!')
                        }
                    }
                }else{
                    this.$modal.msgError('通知数量必须大于0!')
                }
            }
        },
        // 撤销通知
        cancelNotice(){
            cancelNotice(this.id).then((res) => {
                // console.log(res)
                this.getDetailData()
                this.$modal.msgSuccess(res.msg)
            })
        }
    }
}
</script>

<style scoped>
  .options {
    position: absolute;
    z-index:10;
    top: 36px;
    left:140px;
    right:0;
  }
  .options li {
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-top: 0px;
    text-indent: 12px;
    overflow: hidden;
  }
  .options li:hover {
    background: #f3f5f9;
    color: #000;
  }
  .options-head {
    border: 1px solid #ccc;
    background: #f3f5f9;
  }
  .options-item{
    background:#fff;
    overflow-y:scroll;
    height: 384px;
  }
</style>